<template>
  <view class="page">
    <view class="header">
      <image class="logo" :src="getShowNginxPicUrl('6kGU6QA0M8A3xBeHKUhp.png')" mode="widthFix"></image>
    </view>
    <view class="content">
      <!--			轮播图-->
      <view class="banner-container">
        <banner :position="7" height="200rpx"></banner>
      </view>
      <!--			应用功能-->
      <view class="appList">
        <view
          class="app-item"
          @click="
            () =>
              $uni.navigateTo({
                url: '/pages/imagePage/index?jumpType=jumpMiniProgram&btnText=领取校务行社团十大权益&jumpPath=pages%2Fdetail%2Fdetail%3Fqqdocurl%3Dhttps%3A%2F%2Fdocs.qq.com%2Faio%2FDTlN6VEx4akVDaHhR&appId=wxd45c635d754dbf59&urlList=%5B%22https%3A%2F%2Fkou.gdzmtech.com%3A1443%2Fapi-admin%2Ffile%2Fshuatiyu%2F2024%2F3%2F32139f089af141379f8cac55183b9e95.png%22%5D',
              })
          "
        >
          <image class="icon" :src="communicationIcon"></image>
          <view class="text">督学交流</view>
        </view>
        <view class="app-item" @click="goToVocabularyPlanInfoPage">
          <image class="icon" :src="wordIcon"></image>
          <view class="text">背单词</view>
        </view>
        <view class="app-item" @click="() => $uni.redirectTo({ url: '/pages/index/index' })">
          <image class="icon" :src="practiceIcon"></image>
          <view class="text">刷题</view>
        </view>
        <view
          class="app-item"
          @click="
            () =>
              $uni.navigateTo({
                url: '/markingCampaign/pages/dailyNews/index/index',
              })
          "
        >
          <image class="icon" :src="informationIcon"></image>
          <view class="text">每日资讯</view>
        </view>
      </view>
      <!--			我的自习-->
      <view class="block">
        <view class="header">
          <view class="title">我的自习</view>
          <view class="view-more-btn" @click="() => $uni.navigateTo({ url: '/mine/pages/learningLog/index' })">
            <text>学习日志 &gt;</text>
          </view>
        </view>
        <view class="content">
          <!--					自习室 / 排行榜-->
          <view class="tab-list">
            <view
              class="tab-item"
              v-for="item in tabList"
              :key="item"
              :class="{ active: currentSelectTab === item }"
              @click="() => (currentSelectTab = item)"
              >{{ item }}</view
            >
          </view>
          <!--					自习室-->
          <view
            class="tab-page"
            v-if="currentSelectTab === '自习室'"
            @click="() => $uni.navigateTo({ url: '/studyRoom/pages/studyRoomList/index' })"
          >
            <image :src="getShowNginxPicUrl('LB7JN8vBeEa3WmYwoLhb.png')" mode="widthFix" class="image"></image>
            <!--						去自习按钮-->
            <view class="go-to-study-btn btn">去自习</view>
          </view>
          <!--					排行榜-->
          <view
            class="tab-page"
            v-else-if="currentSelectTab === '排行榜'"
            @click="() => $uni.navigateTo({ url: '/studyRoom/pages/rank/index' })"
          >
            <image :src="getShowNginxPicUrl('cppD8Tr9rJrdvKsAyy2p.png')" mode="widthFix" class="image"></image>
            <!--						看排名按钮-->
            <view class="view-rank-btn btn">看排名</view>
          </view>
        </view>
      </view>
      <!--			督学打卡活动-->
      <view class="block">
        <view class="header">
          <view class="title">督学打卡活动</view>
          <view class="view-more-btn" @click="() => $uni.navigateTo({ url: '/studyRoom/pages/activity/list' })">
            <text>查看更多 &gt;</text>
          </view>
        </view>
        <view class="content">
          <image
            :src="getShowNginxPicUrl('rPUZEJd421CDHm5JYVmw.png')"
            mode="widthFix"
            class="banner"
            @click="() => $uni.navigateTo({ url: '/studyRoom/pages/activity/list' })"
          ></image>
          <!--					活动列表（只取前面3个）-->
          <view class="activity-list">
            <view
              class="activity-item"
              v-for="item in activityList"
              :key="item.studyActivityId"
              @click="
                () =>
                  $uni.navigateTo({
                    url: handleUrlParams('/studyRoom/pages/activity/detail', {
                      studyActivityId: item.studyActivityId,
                    }),
                  })
              "
            >
              <!--							活动图片-->
              <image :src="getShowImage(item.activityLogo)" class="activity-logo" v-if="item.activityLogo" mode="widthFix"></image>
              <!--							活动名称-->
              <view class="activity-name">{{ item.activityName }}</view>
              <!--							活动时长-->
              <view class="activity-duration">
                <image :src="rightIcon" class="icon"></image>
                <view>{{ getActivityDuration(item) }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <customTabbar></customTabbar>
  </view>
</template>

<script>
import request from "../../utils/request"
import { getShowNginxPicUrl } from "@/utils/settings"
import banner from "@/components/banner.vue"
import { getShowImage, handleUrlParams } from "@/utils"
import rightIcon from "./assets/right.png"
import dateUtils from "@/utils/dateUtils"
import moment from "@/lib/moment.min"
import communicationIcon from "./assets/communication.png"
import practiceIcon from "./assets/practice.png"
import wordIcon from "./assets/word.png"
import informationIcon from "./assets/information.png"
import customTabbar from "@/components/customTabbar/index.vue"
import store from "@/store"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"

export default {
  components: { banner, customTabbar },
  data() {
    return {
      tabList: ["自习室", "排行榜"],
      currentSelectTab: "自习室",
      activityList: [], //活动列表
      rightIcon,
      communicationIcon,
      practiceIcon,
      wordIcon,
      informationIcon,
      moment,
    }
  },
  methods: {
    handleUrlParams,
    getShowImage,
    getShowNginxPicUrl,
    //获取活动持续时长
    getActivityDuration(item) {
      const durationObj = dateUtils.moment.calculateDateInterval(moment(item.startTime), moment(item.endTime))
      if (durationObj.y > 0) {
        return durationObj.y + "年"
      } else if (durationObj.m > 0) {
        return durationObj.m + "月"
      } else if (durationObj.w > 0) {
        return durationObj.w + "周"
      } else if (durationObj.d > 0) {
        return durationObj.d + "天"
      }
    },
    // 跳转到背单词计划详情界面
    async goToVocabularyPlanInfoPage() {
      let planInfo = store.getters[vocabularyLearningActionType.getters.planInfo]
      if (!planInfo) {
        planInfo = await store.dispatch(vocabularyLearningActionType.actions.planInfo)
      }
			uni.navigateTo({
				url: "/vocabulary/pages/currentPlanInfo/index"
			})
		},
  },
  onLoad() {
    //获取前3个活动
    request({
      url: "studyActivity/getActivityPage",
      data: {
        current: 1,
        size: 3,
      },
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.activityList = data.records
    })
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding-bottom: calc(172rpx + env(safe-area-inset-bottom));
  > .header {
    > .logo {
      width: 350rpx;
    }
  }
  > .content {
    padding: 0 30rpx;
    > .banner-container {
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
    }
    > .appList {
      margin-top: 30rpx;
      display: flex;
      > .app-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        > .icon {
          width: 72rpx;
          height: 72rpx;
        }
        > .text {
          font-size: 30rpx;
          margin-top: 10rpx;
        }
      }
    }
    > .block {
      margin-top: 70rpx;
      > .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .title {
          font-size: 34rpx;
          font-weight: bold;
        }
        > .view-more-btn {
          font-size: 30rpx;
          color: #999999;
        }
      }
      > .content {
        margin-top: 30rpx;
        > .tab-list {
          display: flex;
          > .tab-item {
            margin-right: 24rpx;
            padding: 6rpx 40rpx;
            font-size: 30rpx;
            background: #d7eee7;
            border-radius: 26rpx;
            color: #2cb980;
            &.active {
              background: white;
              border: 3rpx solid #2cb980;
            }
          }
        }
        > .tab-page {
          margin-top: 30rpx;
          position: relative;
          > .image {
            border-radius: 20rpx;
            width: 100%;
          }
          > .btn {
            position: absolute;
            left: 60rpx;
            bottom: 28rpx;
            padding: 6rpx 38rpx;
            font-size: 28rpx;
            color: white;
            border-radius: 27rpx;
          }
          > .go-to-study-btn {
            background: #2cb980;
            border: 2rpx solid #0e815d;
          }
          > .view-rank-btn {
            background: #4399fd;
            border: 2rpx solid #1a4dcc;
          }
        }
        > .banner {
          border-radius: 30rpx;
          width: 100%;
        }
        > .activity-list {
          display: flex;
          margin-top: 30rpx;
          > .activity-item {
            width: 0;
            flex: 1;
            background: #f4f5f7;
            padding: 20rpx;
            border-radius: 30rpx;
            &:not(:last-child) {
              margin-right: 30rpx;
            }
            > .activity-logo {
              width: 100%;
              border-radius: 20rpx;
            }
            > .activity-name {
              margin-top: 20rpx;
              font-size: 28rpx;
              width: 100%;
              //文本限制两行，超出两行加省略号
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            > .activity-duration {
              margin-top: 10rpx;
              color: #b1581e;
              font-size: 30rpx;
              display: flex;
              align-items: center;
              > .icon {
                width: 13rpx;
                height: 13rpx;
                margin-right: 40rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
